<template>
	<view>
		<view class="firstPage" v-if="!pageFirst">
			<image class="img" mode="scaleToFill" src="../../static/page.png"></image>
		</view>

		<view v-if="pageFirst" class="pageHeader2">
			<uni-nav-bar background-color="#39A6FF" :border="false" color="#fff" title="标准查询">

			</uni-nav-bar>

			<view class="pageTabs" style="">
				<text class="item lineBreak" v-for="(item, i) in array" :key="i" :class="{'active': index == i}"
					@click="bindPickerChange(i)">{{item}}</text>

			</view>

		</view>
		<div class="pageHeaderPlace2"></div>

		<view class="listBox">
			<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
			<view class="item" v-for="(item, index) in dataList" :key="item.id" @click="goDetail(item)">
				<text class="text" v-html="item.title"></text>

				<view class="icon">
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
		</view>

		<view v-if='!onLoading && dataList.length == 0 && pageFirst' class="placeText" style="padding-top: 20px;">
			暂无记录！
		</view>

		<!-- <view
			v-if="pageFirst && !onLoading && (formData.total > 0) && (formData.total < formData.pageIndex * formData.pageSize)"
			class="placeText">
			暂无更多!
		</view> -->

		<pageTabbar :page="1"></pageTabbar>
	</view>
</template>
<script>
	import {
		APIJS
	} from '../../api/api.js'
	import pageTabbar from '../../components/pageTabbar.vue'
	import {
		goLogin
	} from '@/utils/utils.js'
	let pageConfig = 0

	export default {
		components: {
			pageTabbar
		},
		data() {
			return {
				formData: {
					pageIndex: 1,
					pageSize: 20,
					total: 0
				},
				dataList: [],
				array: [],
				index: 0,
				noMore: false,
				onLoading: false,
				pageFirst: false
			}
		},
		onLoad() {},
		onPullDownRefresh() {
			this.onRefresh().then(() => {
				uni.stopPullDownRefresh();
			})
		},
		onReachBottom() {
			this.lowerBottom()
		},
		mounted() {
			let vm = this
			let platInfo = uni.getDeviceInfo()

			let hasPageFirst = uni.getStorageSync('hasPageFirst') || 0

			if (hasPageFirst == 0) {
				setTimeout(() => {
					vm.pageFirst = true
					// pageConfig = 1
					uni.setStorageSync('hasPageFirst', 1)
				}, 1500)
			} else {
				vm.pageFirst = true
			}


			// let token = uni.getStorageSync('token')
			// if (!token) {
			// 	goLogin('/')
			// 	return
			// }
			this.pageInit()
		},

		methods: {
			pageInit() {
				let vm = this
				APIJS.getCategoryList({}).then((res) => {
					vm.array = res.data
					vm.getList().then(() => {})
				}).catch((e) => {
					setTimeout(() => {
						goLogin('/')
					}, 600)
				})
			},

			goDetail(item) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${item.id}`
				});
			},
			getList(category) {
				let vm = this
				vm.onLoading = true
				return new Promise((reslove) => {
					let params = {
						category: vm.array[vm.index],
						pageIndex: vm.formData.pageIndex,
						pageSize: vm.formData.pageSize,
						searchKey: ''
					}

					APIJS.getStandardContentList(params).then((res) => {
						vm.dataList = [...vm.dataList, ...res.data]
						vm.formData.total = res.count
						vm.onLoading = false
						reslove()
					}).catch((e) => {
						setTimeout(() => {
							goLogin('/')
							uni.stopPullDownRefresh();
						}, 600)
					})
				})
			},

			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e
				this.onRefresh()
			},
			// 上拉刷新
			onRefresh() {
				let vm = this
				return new Promise((reslove) => {
					vm.dataList = []
					vm.formData.pageIndex = 1
					vm.getList().then((res) => {
						reslove()
					})
				})

			},


			// 下拉加载更多
			lowerBottom() {
				// console.log('lowerBottom')
				let vm = this
				if (vm.formData.total > vm.formData.pageIndex * vm.formData.pageSize) {
					vm.formData.pageIndex++
					vm.getList()
				} else {
					// vm.noMore = true
				}
			},


		}
	}
</script>

<style lang="less">
	// /deep/.uni-scroll-view-refresh-inner>svg {
	// 	fill: #39A6FF !important;
	// }

	// /deep/.uni-scroll-view-refresh__spinner>circle {
	// 	color: #39A6FF !important;
	// }
</style>
<style scoped lang="less">
	.firstPage {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		right: 0;
		z-index: 999999;

		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}



	.pageHeader2 {
		background-color: #39A6FF;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;

		/* #ifdef APP-PLUS */
		height: 139px;
		padding-top: 35px;
		/* #endif */

		/* #ifdef H5 */
		height: 104px;
		/* #endif */

	}

	.pageHeaderPlace2 {
		/* #ifdef APP-PLUS */
		height: 134px;
		/* #endif */
		width: 100%;
		background-color: #39A6FF;

		/* #ifdef H5 */
		height: 94px;
		/* #endif */
	}


	.pageTabs {
		height: 60px;
		padding: 0 10px;
		// display: flex;
		// overflow: hidden;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fff;
		overflow-x: scroll;
		overflow-y: hidden;
		// justify-content: space-between;
		white-space: nowrap;
		font-size: 28upx;
		font-size: 16px;

		.item {

			text-align: center;
			display: inline-block;
			padding: 0 20upx;
			line-height: 56px;
			border-bottom: 2px solid #fff;
			font-weight: bold;
			border-right: 1px solid #f5f5f5;

			&.active {
				color: #39A6FF;
				border-bottom: 2px solid #39A6FF;
			}

			&:last-child {
				border-right: 0
			}
		}
	}

	.headerPicker {
		width: 100%;
		font-size: 14px;
		line-height: 44px;

		.uni-input {
			width: 100%;
			text-align: center;
		}
	}

	.listBox {
		padding-top: 10px;

		.item {
			border-bottom: 1px solid #ebeef5;
			line-height: 22px;
			font-size: 16px;
			display: flex;
			padding: 10px 15px;
			align-items: center;
			justify-content: space-between;

			&:active {
				background-color: #f5f5f5;
			}

			.text {
				flex: 1;
				padding-right: 10px;
			}

			.icon {
				width: auto;
			}
		}
	}


	.placeText {
		text-align: center;
		line-height: 40px;
		font-size: 14px;
	}


	.lineBreak {
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;

		text-overflow: ellipsis;
	}
</style>